<template>
  <div class="page">
    <div class="hei20"></div>
    <div class="customsWrapper">
      <div class="customsContainer">
        <div class="customsMain">
            <mt-cell title="日志编号">
              <span style='color:red'>[{{detail.logNumber}}]</span>
            </mt-cell>
            <mt-cell title="日志来源">
              <span>{{detail.userRole}}</span>
            </mt-cell>
            <mt-cell title="日志内容">
              <span>{{detail.description}}</span>
            </mt-cell>
            <mt-cell title="上报人">
              <span>{{detail.userName}}</span>
            </mt-cell>
            <mt-cell title="联系方式">
              <span>{{detail.reportPhone}}</span>
            </mt-cell>
            <mt-cell title="上报时间">
              <span>{{reportTime}}</span>
            </mt-cell>
            <mt-cell title="日志分类">
              <span>{{FlokeTypeName}}</span>
            </mt-cell>
            <mt-cell title="走访地址">
              <span>{{detail.happenAddress}}</span>
            </mt-cell>
            <mt-cell title="图片">
              <span>
                <build-image :imgPath="detail.picture" ></build-image>
              </span>
            </mt-cell>
            <mt-cell title="音频">
              <span v-if="detail.record">
                <i @click="handlePlay('audio')"><img :src="require('@/assets/images/vioceBtn.png')" /> </i>
                <audio class="audio" ref="audio">
                  <source :src="baseUrl +'/file/'+ detail.record + '?token=' + token" type="audio/mpeg">
                  您的浏览器不支持 audio 元素。
                </audio>
              </span>
              <span style="color:rgb(17, 193, 243)" v-else>
                暂无音频
              </span>
            </mt-cell>
            <div class="hei20"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import Vue from 'vue'
import Lib from '@/assets/js/Lib'
import { Cell } from 'mint-ui'
Vue.component(Cell.name, Cell)
import {getFolkLog} from '@/assets/js/ApiUtil'
import {getLogCategory} from '@/assets/js/DictData'
import {setTimes} from '@/assets/js/Utils'
import BuildImage from '@/components/BuildImage'
import  * as token from '@/assets/js/RequestUtil'
import App from '@/assets/js/conf'
Vue.component(BuildImage.name, BuildImage)
export default {
  name: 'customsDetail',
  data () {
    return {
      title: '民情日志详情',
      detail: {},
      playFlag: false,
      baseUrl: App.baseUrl,
      token: token.token
    }
  },
  components: {
    Cell,
    BuildImage
  },
  mounted () {
    let id = this.getQueryVariable('id')
    this.getFolkeData(id)
  },
  methods: {
    getQueryVariable (variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length ; i++) {
          var pair = vars[i].split("=");
          if(pair[0] === variable){
            return pair[1]
          }
      }
    },
    getFolkeData (id) {
      getFolkLog(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.detail = data
          // this.detail.updateTime = setTimes(data.updateTime)
        }
      })
    },
    handlePlay (key) {
      if (!this.playFlag) {
        this.playFlag = true
        this.$refs[key].play()
      } else {
        this.playFlag = false
        this.$refs[key].pause()
      }
    },
  },
  computed: {
    FlokeTypeName () {
      let logCategory = getLogCategory()
      for (let i = 0; i < logCategory.length; i++) {
        if (this.detail.logCategory === logCategory[i].valueCode) {
          return logCategory[i].valueName
        }
      }
    },
    reportTime () {
      if (this.detail.reportTime) {
        return setTimes(this.detail.reportTime)
      } else {
        return ''
      }
    }
  }
}
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  overflow: auto
}
.customsWrapper {
  padding:0 10px
}
.customsTitle {
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  text-align: center
}
.mint-cell >>> .mint-cell-title {
  flex: 0 0 100px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 160%;
  }
.mint-cell span {
  padding:  10px 0;
  line-height: 160%;
}
.upSrc {
  width: 200px;
  height: 200px;
}
.audio {
  width: 100px;
  height: 80px
}
</style>
